/*
 * @Description: 全宗操作组件
 * @Author: Rfan
 * @Date: 2022-01-07 15:35:59
 * @LastEditTime: 2022-05-26 19:16:37
 */

import { useMemo, useState } from 'react';
import { Button, Modal, Space } from 'antd';
import cs from 'classnames';
import classNames from 'classnames/bind';
import { useFondContext } from '../contexts/FondContext';
import AddDialog from './dialogs/AddDialog';
import styles from '../styles/fondMain.module.scss';

const cx = classNames.bind(styles);

const Operate = () => {
  const { selectFondId, onDeleteFond } = useFondContext();

  // 新增弹窗状态
  const [addDialogVisible, setAddDialogVisible] = useState(false);

  const showModal = () => {
    setAddDialogVisible(true);
  };

  const delFond = () => {
    Modal.confirm({
      title: '删除',
      content: '确认删除该全宗？',
      onOk() {
        onDeleteFond(selectFondId);
      },
      onCancel() {
        console.log('del unit Cancel');
      }
    });
  };

  return (
    <>
      <div className={cs('filter-container', cx('fond-title'))}>
        <p className="page-title">单位下全宗</p>
        <Space size="small">
          <Button disabled={!(selectFondId && selectFondId > 0)} onClick={delFond}>
            删除全宗
          </Button>
          <Button type="primary" onClick={showModal}>
            新建全宗
          </Button>
        </Space>
      </div>
      {useMemo(
        () => (
          <AddDialog
            visible={addDialogVisible}
            onClose={() => {
              setAddDialogVisible(false);
            }}
          />
        ),
        [addDialogVisible]
      )}
    </>
  );
};

export default Operate;
